<template>
  <div>App</div>
  <p>count:{{ count }}</p>
  <button @click="changeCount">changeCount</button>
  <Header />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
  import { ref } from 'vue';
  import Header from './components/Header.vue';

  /* 
    ref():
      - 接受一个内布值，返回一个响应式的、可更改的ref对象
      - 此对象只有一个指向其内部值的属性 .value
      - 在模板中使用 ref对象 默认读取.value的值
      - 在js区域使用ref对象的值的时候 要添加.value
  */

  const count = ref(1);

  const changeCount = () => {
    count.value++;
  }


</script>

<style  scoped lang="scss">
  
</style>